<template>
  <el-container class="font-sans antialiased">
    <div ref="container" class="absolute inset-0 overflow-hidden">
      <el-header class="absolute top-0 w-full p-0">
        <div class="h-full float-left relative logo-title">
          <img
            class="absolute top-1/2 -translate-y-1/2 select-none"
            src="./assets/logo.png"
          />
          <span
            class="absolute top-1/2 -translate-y-1/2 select-none text-gray-300 cursor-default"
          >
            不忍筆記
          </span>
        </div>
        <el-menu
          class="h-full border-0"
          mode="horizontal"
          text-color="#D1D5DB"
          background-color="transparent"
          active-text-color="#FCD34D"
          :default-active="router.currentRoute.value.fullPath"
          router
        >
          <el-menu-item index="/">首页</el-menu-item>
          <el-menu-item index="/three">Three</el-menu-item>
          <el-menu-item index="/cesium">Cesium</el-menu-item>
          <el-menu-item index="/webgl">WebGL</el-menu-item>
          <el-menu-item index="/webgpu">WebGPU</el-menu-item>
          <el-menu-item index="/test">Test</el-menu-item>
          <el-menu-item index="/makeapie">做个饼</el-menu-item>
        </el-menu>
      </el-header>
      <el-main class="absolute bottom-0 w-full p-0 overflow-hidden">
        <router-view v-slot="{ Component }">
          <transition :name="data.transition">
            <component :is="Component" />
          </transition>
        </router-view>
      </el-main>
    </div>
  </el-container>
</template>

<script setup>
import "./style/baizhoushi.scss";
import { ref, reactive, onMounted } from "vue";
import router from "./router/index";
import * as THREE from "three";
import FOG from "vanta/src/vanta.fog";

const container = ref(null);
const data = reactive({ transition: "" });

router.afterEach((to, from) => {
  let toIndex = to.meta.index;
  let fromIndex = from.meta.index;
  if (!isNaN(fromIndex)) {
    data.transition = toIndex < fromIndex ? "slide-left" : "slide-right";
  } else if (toIndex == 0) {
    data.transition = "slide-right";
  } else {
    data.transition = "";
  }
});

onMounted(() => {
  let vanta = FOG({
    el: container.value,
    THREE: THREE,
    highlightColor: 0xaaffff,
    midtoneColor: 0x00002a,
    lowlightColor: 0xaaaa7e,
    baseColor: 0x1a9eaa,
  });
  vanta.resize();
});
</script>

<style lang="scss">
.el-header {
  height: 60px !important;

  .logo-title {
    width: 35vw;
  }

  .logo-title img {
    left: 25px;
    width: 40px;
  }

  .logo-title span {
    left: 80px;
    font-size: 28px;
    font-family: baizhoushi;
  }
}

.el-main {
  top: 60px;

  .el-aside {
    width: 200px;
  }

  .el-main {
    top: 0px;
  }
}

/* 路由切换过渡 */
.slide-left-enter-active,
.slide-left-leave-active,
.slide-right-enter-active,
.slide-right-leave-active {
  transition: all 0.5s linear;
}

.slide-left-enter-from {
  left: -100%;
}

.slide-left-enter-to,
.slide-left-leave-from {
  left: 0;
}

.slide-left-leave-to {
  left: 100%;
}

.slide-right-enter-from {
  left: 100%;
}

.slide-right-enter-to,
.slide-right-leave-from {
  left: 0;
}

.slide-right-leave-to {
  left: -100%;
}
</style>
